<template>
    <div>
        <el-row>
            <el-col :span="6">
                【题型】：{{obj.questionType}}
            </el-col>
            <el-col :span="6">
                【编号】：{{obj.id}}
            </el-col>
            <el-col :span="6">
                【难度】：{{obj.difficulty}}
            </el-col>
            <el-col :span="6">
                【标签】：{{obj.tags}}
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="6">
                【学科】：{{obj.subjectName}}
            </el-col>
            <el-col :span="6">
                【目录】：{{obj.directoryName}}
            </el-col>
            <el-col :span="6">
                【方向】：{{obj.direction}}
            </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
            <el-col>
                【题干】:
            </el-col>
            <el-col>
                <div v-html="obj.question"></div>
            </el-col>

            <el-col v-show="isOptions">
                 {{obj.questionType}}题选项:  (以下选中的选项为正确答案)
                <el-row>
                     <el-radio-group v-model="radio" v-show="isClose">
                       <el-radio
                       class="option"
                       v-for="item in obj.options"
                       :key="item.id"
                       :label="item.code">
                       {{item.title}}
                       </el-radio>
                     </el-radio-group>

                      <el-checkbox-group v-model="checkbox" v-show="!isClose">
                       <el-checkbox
                       class="option"
                       v-for="item in obj.options"
                       :key="item.id"
                       :label="item.code">
                       {{item.title}}
                       </el-checkbox>
                     </el-checkbox-group>
                </el-row>
            </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
            <el-col>
                【参考答案】：
                <el-button type="danger" @click="btn">视频答案预览</el-button>
                <div>
                <meta name=referrer content=no-referrer>
                <video v-show="isVideo" src="" width="400px" height="300px"
                muted="false" controls="controls" autoplay="autoplay" ></video>
                </div>
            </el-col>
        </el-row>

         <el-divider></el-divider>

        <el-row>
            <el-col>
                【答案解析】：<p v-html="obj.answer"></p>
            </el-col>
        </el-row>

         <el-divider></el-divider>

        <el-row>
            <el-col>
                【题目备注】：{{obj.remarks}}
            </el-col>
        </el-row>
        <el-row type="flex" justify="end"><el-button type="primary" @click="close">关闭</el-button></el-row>
    </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
import { questionType, difficulty } from '@/api//hmmm/constants.js'
export default {

  props: {
    previewIdList: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      obj: {},
      radio: '',
      checkbox: [],
      isClose: true,
      isOptions: true,
      isVideo: false
    }
  },

  methods: {
    // 难度转换函数
    getDifficultyType (value) {
      difficulty.forEach(item => {
        if (item.value + '' === value) {
          this.obj.difficulty = item.label
        }
      })
    },
    // 题型转换函数
    getQuestionType (value) {
      questionType.forEach(item => {
        if (item.value + '' === value) {
          this.obj.questionType = item.label
        }
      })
    },
    // 获取详情接口
    async getPreviewList () {
      // console.log(this.previewIdList)
      try {
        const res = await detail(this.previewIdList)
        console.log(res)
        this.obj = res.data
        this.getQuestionType(res.data.questionType)
        this.getDifficultyType(res.data.difficulty)
        if (res.data.questionType === '单选') {
          this.isClose = true
          this.isOptions = true
          res.data.options.forEach(item => {
            if (item.isRight === 1) {
              this.radio = item.code
            }
          })
        } else if (res.data.questionType === '多选') {
          this.isClose = false
          this.isOptions = true
          const arr = res.data.options.filter(item => item.isRight === 1)
          this.checkbox = arr.map(item => item.code)
        } else if (res.data.questionType === '简答') {
          this.isOptions = false
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 视频按钮点击事假
    btn () {
      this.isVideo = true
    },
    // 挂壁弹框按钮
    close () {
      this.$emit('dialogClose')
    }
  }
}
</script>

<style scoped lang='scss'>
.el-row {
    margin-bottom: 10px;
}
.option {
    display: flex;
    margin-top: 20px;
}
</style>
